<template>
  <div>
    <div class="banner_flex">
      <article class="innerPage2 bookList2">
        <header class="breadcrumb">
          <div class="bread_left">
            <span>banner顺序调整</span>
          </div>
        </header>
        <section>
          <div class="title_ps"></div>
          <div class="save_class">
            <el-button class="save" @click="sortFun" v-alive><i class="el-icon-receiving"></i>保存</el-button>
          </div>
          <div class="item_post">
            <vuedraggable class="wrapper" v-model="list2">
              <transition-group>
                <div v-for="(item, index) in list2" :key="index" class="item_he">
                  <p>
                    <span><i class="el-icon-menu"></i></span>{{ item.name }}
                  </p>
                </div>
              </transition-group>
            </vuedraggable>
          </div>
        </section>
      </article>
      <div class="placeholder_banner"></div>
      <article class="innerPage bookList">
        <header class="breadcrumb">
          <div class="bread_left">
            <span>筛选条件</span>
          </div>
        </header>
        <div class="search_pd" style="min-width: 680px;background: #fff;">
          <searchCondition :formItemList="[]" :emitSearch="false" :resetSearch="true" @search="search" @reset="reset" ref="mychild" :showHeight="42">
            <el-form-item label="是否显示">
              <el-radio-group v-model="isshow" @change="changshow" class="radio_class" style="height: auto; align-items: flex-start; min-width: unset">
                <el-radio :label="0">全部</el-radio>
                <el-radio :label="1">显示</el-radio>
                <el-radio :label="2">未显示</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="跳转方式">
              <el-radio-group v-model="skip_way" @change="changshow" class="radio_class" style="height: auto; align-items: flex-start; min-width: unset">
                <el-radio :label="0">全部</el-radio>
                <el-radio :label="1">H5链接</el-radio>
                <el-radio :label="2">应用内部</el-radio>
                <el-radio :label="3">不跳转</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="关键词">
              <el-input v-model="searchValue" placeholder="请输入"></el-input>
            </el-form-item>
          </searchCondition>
        </div>
        <section>
          <div class="decorate"></div>
          <div class="btn_addclass">
            <el-button icon="el-icon-circle-plus-outline" class="btn-green icon-fontSize" @click="addbtn">添加banner</el-button>
            <div></div>
          </div>
        </section>
        <section style="padding: 20px">
          <div class="set_flex">
            <div v-for="(item, index) in list" :key="index" class="set_widt">
              <div class="set_img">
                <img :src="$img(item.img)" :onerror="$errImg" />
                <div class="type">{{ ['推荐','看书','听书','汇画'][item.big_type_id] }}</div>
              </div>
              <div class="footer_height">
                <div class="link_class">{{ `跳转位置：${[2,3,4].includes(item.skip_way)?item.link_name : item.link}(${['','H5链接','每日荐读','阅读书单','资源详情']?.[item.skip_way]})` }}</div>
                <div class="footer_flex">
                  <div class="name_class">{{ item.name }}</div>
                  <div class="operation">
                    <div>
                      <div class="tab_swt1">
                        <el-switch v-model="item.is_play" active-color="#00a9b0" inactive-color="#ff4949" :active-value="1" :inactive-value="2" active-text="显示" inactive-text="不显示" class="tableScopeSwitchA" @change="switchchange(item.is_play, item.id)">
                        </el-switch>
                      </div>
                    </div>
                    <div class="edit_class" @click="changlist(item.id)" v-alive>
                      <i class="el-icon-edit"></i>
                      <span>修改</span>
                    </div>
                    <div class="delete_class" @click="activiDel(item.id)" v-alive>
                      <i class="el-icon-delete"></i>
                      <span>删除</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
        <div style="height: 20px"></div>
        <footer class="pagination">
          <div>
            <el-pagination background prev-text="上一页" next-text="下一页" layout="prev, pager, next, jumper" :total="listTotal" :page-size="10" @current-change="handleCurrentChange" :current-page.sync="currentPage1">
            </el-pagination>

          </div>
          <p>
            共
            <span>{{ listTotal || 0 }}</span>
            数据
          </p>
        </footer>
      </article>
    </div>
    <div>
      <Ddlmoadl ref="isdel" @deletesuccess="deletesuccess"></Ddlmoadl>
    </div>
  </div>
</template>

<script>
import Ddlmoadl from "@/components/Deletebtn/Deletetk.vue"
import vuedraggable from "vuedraggable"
export default {
  data() {
    return {
      isshow: 0,
      showLocation: 0,
      searchValue: "",
      page: 1,
      list: [],
      listTotal: 0, //total
      currentPage1: 1, //总页数
      delid: "",
      list2: [],
      sortList: [],
      limit: 10,
      skip_way: 0,
    }
  },
  components: {
    Ddlmoadl,
    vuedraggable,
  },
  updated() {
    this.sortList = []
    this.list2.map((item, index) => {
      this.sortList.push({ id: item.id, sort: this.list2.length - index })
    })
  },
  mounted() { },
  created() { },
  activated() {
    if (this.$route.params?.action == "refresh" || this.$isFirstInPage.get()) {
      this.page = 1
      this.listTotal = 0
      this.currentPage1 = 1
      this.tableData = []
      this.searchValue = ""
      this.showLocation = 0
      this.isshow = 0
      this.getList()
    }

    this.setPageTabs()
  },
  methods: {
    //重置
    reset() {
      this.searchValue = ""
      this.isshow = 0
      this.page = 1
      this.getList()
    },
    //查询
    search() {
      this.page = 1
      this.getList()
    },
    changshow() {
      this.getList()
    },
    locaChang() {
      this.getList()
    },
    isfun() {
      this.getList()
    },
    //分页
    handleCurrentChange(val) {
      this.page = val
      this.getList()
    },
    async getList() {
      try {
        let res = await this.request({
          url: "/admin/banner/list",
          method: "get",
          loading: true,
          data: {
            page: this.page,
            limit: this.limit,
            keywords: this.searchValue,
            // type: this.showLocation,
            is_play: this.isshow,
            skip_way: this.skip_way || 0,
          },
        })
        if (res) {
          this.list = res.content.data
          this.listTotal = res.content.total
          this.currentPage1 = res.content.current_page
          this.list2 = JSON.stringify(res.content.data)
          this.list2 = JSON.parse(this.list2)
        }
      } catch (err) {
        let error = err.message.split("/")
        if (error[0] == 203) {
          this.list = []
          this.listTotal = 0
        }
        this.errorHandler(err)
      }
    },
    async getList2() {
      try {
        let res = await this.request({
          url: "/admin/banner/list",
          method: "get",
          loading: true,
          data: {
            page: this.page,
            limit: this.limit,
            keywords: this.searchValue,
            type: this.showLocation,
            is_play: this.isshow,
          },
        })
        if (res) {
          this.list2 = res.content.data
        }
      } catch (err) {
        this.errorHandler(err)
      }
    },
    // 添加
    addbtn() {
      this.$router.push({
        path: "/ImageManagement/addBanner",
      })
    },
    //搜索
    searchFun() {
      this.getList()
    },
    //切换显示
    switchchange(is, id) {
      this.displayPost(is, id)
    },
    async displayPost(is_play, id) {
      try {
        let res = await this.request({
          url: "/admin/banner/cancelAndRelease",
          method: "post",
          loading: true,
          data: {
            ids: id,
            is_play: is_play,
          },
        })
        if (res) {
          this.$message.success(res.msg)
          // let that = this
          // setTimeout(() => {
          //   that.getList()
          // }, 2000)
        }
      } catch (err) {
        this.errorHandler(err)
      }
    },
    //
    //删除
    activiDel(id) {
      this.delid = id
      this.$refs.isdel.delshow(id)
    },
    async deletesuccess() {
      try {
        let res = await this.request({
          url: "/admin/banner/del",
          method: "post",
          loading: true,
          data: {
            id: this.delid,
          },
        })
        if (res) {
          this.$message.success("删除成功")
          let that = this
          if (this.page >= 2) {
            if (this.tableData.length == 1) {
              this.page = this.page - 1
            }
          }
          setTimeout(() => {
            that.getList()
          }, 2000)
        }
      } catch (err) {
        this.errorHandler(err)
      }
    },
    changlist(id) {
      this.$router.push({
        path: "/ImageManagement/changBanner",
        query: {
          id: id,
        },
      })
    },
    async sortFun() {
      if (this.sortList.length > 1) {
        try {
          let res = await this.request({
            url: "/admin/banner/sortChange",
            method: "post",
            loading: true,
            data: {
              content: JSON.stringify(this.sortList),
            },
          })
          if (res) {
            this.$message.success(res.msg)
            let that = this
            setTimeout(() => {
              that.getList()
            }, 2000)
          }
        } catch (err) {
          this.errorHandler(err)
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>
<style lang="scss">
.save_class {
  padding: 0 20px;
  > .save {
    width: 240px !important;
    height: 32px !important;
    background: #ededed !important;
    border-radius: 5px !important;
  }
}
.radio_class {
  display: flex;
  flex-direction: row;
  height: 50px;
  align-items: center;
  padding: 0 20px;
  > div:nth-child(1) {
    margin-right: 40px;
  }
  > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    > span {
      margin-right: 10px;
      font-size: 14px;
      font-family: MicrosoftYaHei;
      text-align: left;
      color: #000000;
    }
  }
  .el-radio .el-radio__inner .el-radio__input {
    display: none !important;
  }
  .el-radio__input {
    display: none !important;
  }
  .el-radio__inner {
    display: none !important;
  }
  .el-radio__label {
  }
  .el-radio__input.is-checked + .el-radio__label {
    color: $themeColorponti !important;
  }
  .el-radio-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
  }
  .el-radio {
    width: 100px !important;
    height: 30px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ededed;
    border-radius: 4px;
    margin-right: 7px;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    text-align: center;
    color: #999999;
  }
  .el-radio__label {
    font-size: 12px !important;
    padding-left: 0 !important;
  }
  .is-checked {
    background: #ebf5ff;
    border: 1px solid $themeColorponti;
  }
  .raicon {
    position: absolute;
    right: 0;
    bottom: 0;
    color: #fff;
    z-index: 2;
  }

  .el-checkbox__input {
    display: none;
  }
  .el-checkbox .vm-checkbox {
    width: 100px;
    height: 30px;
    background: #fff;
    font-size: 12px;
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
    font-weight: 400;
    text-align: center;
    color: #000000;
  }
  .el-checkbox__label {
    padding-left: 0px;
    width: 100px;
    height: 30px;
    background: #ededed;
    font-size: 12px;
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
    font-weight: 400;
    text-align: center;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .is-checked {
    .el-checkbox__label {
      background: #fff !important;
    }
  }
}
.tab_swt1 {
  width: 70px;
  overflow: hidden;
  .tableScopeSwitchA {
    width: 66px !important;
    height: 26px !important;
    line-height: 26px !important;
    border-radius: 13px !important;
  }
  .tableScopeSwitchA .el-switch__label {
    position: absolute;
    display: none;
    color: #fff;
    width: 66px !important;
    height: 26px !important;
    line-height: 26px !important;
    border-radius: 13px !important;
  }
  /*打开时文字位置设置*/
  .tableScopeSwitchA .el-switch__label--right {
    z-index: 1;
    right: -14px; /*不同场景下可能不同，自行调整*/
    font-size: 12px;
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
    font-weight: 400;
    color: #ffffff;
  }
  /*关闭时文字位置设置*/
  .tableScopeSwitchA .el-switch__label--left {
    z-index: 1;
    left: 20px; /*不同场景下可能不同，自行调整*/
    font-size: 12px;
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
    font-weight: 400;
    color: #fff;
  }
  /*显示文字*/
  .tableScopeSwitchA .el-switch__label.is-active {
    display: block;
  }
  .tableScopeSwitchA.el-switch .el-switch__core,
  .el-switch .el-switch__label {
    width: 70px !important; /*开关按钮的宽度大小*/
    height: 20px !important;
    line-height: 20px !important;
    border-radius: 13px !important;
  }
  .el-switch__core:after {
    top: 1px;
  }
}

</style>
